const path = require('path') //引入node相关的模块的包，path是个模块，因为下面要指定导出路径时需要的是绝对路径，需要用到这个模块

module.exports = {
    entry: "./src/main.js", //需要打包导出的文件
    output: { //打包导出后的文件路径
        /*resolve()方法可以对两个路径进行拼接，__dirname 是node上下中一个全局变量，可以获取当前目录所在路径，dist就是我们要导出的路径
          理解：__dirname获取本文件（webpack.config.js）的所在路径，是个绝对路径，然后和后面的dist进行拼接，也就指定到了本文件同级目录下的dist文件夹中了*/
        path: path.resolve(__dirname, "dist"),
        filename: "build.js", //打包导出的文件名
        /*会给所有url的前面加上配置的这个值，比如有个元素的background-image的url为../img/huluwa.jpg,那么最后打包生成了个文件，
          图片生成重命名后的文件名为1321561016516dfasds.jpg，那么最后执行文件路径时，如果没有配置就是url("1321561016516dfasds.jpg"),
          加上了之后就是url("dist/1321561016516dfasds.jpg")，这样才能正确找到文件
         */
        publicPath: "./dist/"
    },
    mode: 'development', //指定导出的版本，4.x版本的webpack需要指定，不然就会自动使用production（生产环境）版本，这里指定为开发版本，也就是生成文件不会压缩
    module: {
        rules: [
            {
                test: /\.css$/,//正则匹配资源
                //css-loader只负责将css文件进行加载
                //style-loader负责将样式添加到dom
                //使用多个loader时，数组中加载依赖是从右往左加载，这里style-loader必须在css-loader前面
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // style-loader负责将样式添加到dom
                }, {
                    loader: "css-loader" // css-loader只负责将css文件进行加载
                }, {
                    loader: "less-loader" // 编译less文件为css
                }]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时，会将图片编译成base64字符串的形式,
                            //当图片大于这个limit，会用file-loader进行加载
                            limit: 13000,
                            //在webpack4.x必须显式的指定fallback备用方法，这里指定为file-loader
                            fallback: require.resolve('file-loader'),
                            encoding: "base64",
                            //这个表示在打包生成的文件的名字，如果不配置这个，会根据hash生成一个名字，这个配置就是自定义命名规则
                            //这个表示会在输出文件夹dist下创建一个img文件夹，所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
                            name: "img/[name].[hash:8].[ext]",
                        },
                    },
                    /*上面指定了fallback，是必须的，在webpack4.x下，不要配置下面这个file-loader，因为这里我遇到了坑，先是配置了上面的
                    url-loader,然后配置了下面的file-loader，最后图片文件是按照配置生成了，但是却不引用，没生效，页面没有加载，同时配置了下面这个
                    还影响了页面中base64显示图片，不会加载出来，但是当我把下面这个配置删除时，执行npm run dev打包时却显示找不到file-loader，搞了
                    很久，才试出来，需要在url-loader中配置fallback来显示指定备用方法指向file-loader，这样才有效果，同时，上面指定fallback，也不要
                    配置下面这个file-loader，否则依然不起效果
                     */
                    // {
                    //     loader: 'file-loader',
                    //     options: {
                    //         //这个表示在打包生成的文件的名字，如果不配置这个，会根据hash生成一个名字，这个配置就是自定义命名规则
                    //         //这个表示会在输出文件夹dist下创建一个img文件夹，所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
                    //         name: "img/[name].[hash:8].[ext]",
                    //         publicPath: './dist/',
                    //     },
                    // },
                ]
            },
            {
                test: /\.m?js$/,
                // exclude排除
                // include包含
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

/*在控制台中，也就是cmd终端进入到当前目录，输入如下命令即可打包，会打包成上面mode指定版本的形式:
   > webpack
*/